<template>
  <div class="mui-content" @click="closeSheet" @scroll="scrolls" :style="{height: `${scrollHeight}px`}">
    <div class="mui-control-content mui-active" :style="{'min-height': scrollHeight + 106 + 'px'}">
      <transition-group name="list">
        <div class="mui-card radius" 
          v-for="(val, key) in billList" :key="val.id" 
          :class="{disabled: val.show_img, short: inArray(shortCardList, val.id) !== false}"
          @click="updateBill(val.id)"
        >
          <div class="mui-card-header mui-card-media" @click.stop="shortCard(val.id)">
            <div class="mui-media-body mg-0">
              <img :src="val.image" class="my-icon">
              <span class="title">{{val.name}}</span>
              <span class="sub-title">{{val.card_type}}</span>
              <span class="sub-title">{{val.card_no}}</span>
              <span class="sub-title">|</span>
              <span class="sub-title">{{val.owner}}</span>
              <img class="cooperation-icon" src="/src/assets/icons/set.png" alt="操作" @click.stop="actionSheet(val.id, key)">
            </div>
          </div>
          <div class="mui-card-popup" :class="{show: val.id === cardId}">
            <div class="popup-item" @click.stop="editHandle(val.id)">编辑</div>
            <div class="popup-item" @click.stop="delHandle(val.id)">删除</div>
            <div class="popup-item" @click.stop="hideCard(val.id)">隐藏</div>
          </div>
          <div class="mui-card-content">
            <div class="mui-card-content-inner flex">
              <div class="flex-item short">
                  <p>应还金额</p>
                  <p class="word-link"
                    @click.stop="promptAmount(val.id)"
                  >
                    {{val.payment_amount}}
                  </p>
              </div>
              <div class="flex-item long">
                  <div class="right-word-black">
                      <div class="big">{{val.show_day}}</div>
                      <div class="dp-ib">
                          <p class="normal">{{val.show_word}}</p>
                          <p class="small">{{val.show_date}}</p>
                      </div>
                  </div>
              </div>
            </div>
          </div>
          <div class="mui-card-footer">
            <div class="f-l">
              <p>信用卡额度：{{val.credit_amount}}</p>
              <p>账单周期：{{val.bill_cycle}}</p>
            </div>
          </div>
          <img v-if="val.show_img" class="complete-image" :src="iconImage[val.show_img]">
        </div>
      </transition-group>
      <!-- 添加卡片 -->
      <div class="mui-card radius mui-card-btn" @click="toAddCard">
        <img src="/src/assets/icons/add.png">
        <span class="card-btn">增加卡片</span>
      </div>
      <div class="mui-card-link" @click="showHide">
        <span>{{hideText}}</span>
        <img :src="`/src/assets/icons/arrow-${isHide ? 'down' : 'up'}.png`">
      </div>
      <!-- 隐藏卡片 -->
      <div class="mui-card radius" 
          v-for="(val, key) in hideList" :key="val.id" 
          :class="{disabled: val.show_img, short: inArray(shortCardList, val.id) !== false}"
          @click="updateBill(val.id)"
          v-show="!isHide"
        >
          <div class="mui-card-header mui-card-media" @click.stop="shortCard(val.id)">
            <div class="mui-media-body mg-0">
              <img :src="val.image" class="my-icon">
              <span class="title">{{val.name}}</span>
              <span class="sub-title">{{val.card_type}}</span>
              <span class="sub-title">{{val.card_no}}</span>
              <span class="sub-title">|</span>
              <span class="sub-title">{{val.owner}}</span>
              <img class="cooperation-icon" src="/src/assets/icons/set.png" alt="操作" @click.stop="actionSheet(val.id, key)">
            </div>
          </div>
          <div class="mui-card-popup" :class="{show: val.id === cardId}">
            <div class="popup-item" @click.stop="editHandle(val.id)">编辑</div>
            <div class="popup-item" @click.stop="delHandle(val.id)">删除</div>
            <div class="popup-item" @click.stop="showCard(val.id)">显示</div>
          </div>
          <div class="mui-card-content">
            <div class="mui-card-content-inner flex">
              <div class="flex-item short">
                  <p>应还金额</p>
                  <p 
                    :class="{
                      'word-link': val.can_input_pay_amount === 1,
                      'word-no-link': val.can_input_pay_amount === 0
                    }"
                    @click.stop="val.can_input_pay_amount === 1 && promptAmount(val.id)"
                  >
                    {{val.payment_amount}}
                  </p>
              </div>
              <div class="flex-item long">
                  <div class="right-word-black">
                      <div class="big">{{val.show_day}}</div>
                      <div class="dp-ib">
                          <p class="normal">{{val.show_word}}</p>
                          <p class="small">{{val.show_date}}</p>
                      </div>
                  </div>
              </div>
            </div>
          </div>
          <div class="mui-card-footer">
            <div class="f-l">
              <p>信用卡额度：{{val.credit_amount}}</p>
              <p>账单周期：{{val.bill_cycle}}</p>
            </div>
          </div>
          <img v-if="val.show_img" class="complete-image" :src="iconImage[val.show_img]">
        </div>
    </div>
  </div>
</template>

<script>
  import {MessageBox, Toast} from 'Mint-ui'

  export default {
    name: 'MyBillCard',
    data () {
      return {
        billList: [],
        hideList: [],
        iconImage: {
          'green': '/src/assets/icons/complete-bill-green.png',
          'gray': '/src/assets/icons/complete-bill-gray.png'
        },
        page: 1,
        limit: 100,
        owner: -1,
        bank_id: [],
        cardId: 0,
        listIndex: '',
        /* 卡片显隐 */
        shortCardList: [],
        isHide: true,
        hideText: '显示隐藏的卡片',
        scrollHeight: 0
      }
    },
    methods: {
      getBillList () {
        this.closeSheet()
        let params = {
          page: this.page,
          limit: this.limit,
          owner: this.owner,
          bank_id: this.bank_id,
          is_hide: 2
        }
        // post请求
        this.$post('/vue/card/get_bill_list', params).then(data => {
          this.billList = data
        })
      },
      getHideList () {
        this.closeSheet()
        let params = {
          page: this.page,
          limit: this.limit,
          owner: this.owner,
          bank_id: this.bank_id,
          is_hide: 1
        }
        // post请求
        this.$post('/vue/card/get_bill_list', params).then(data => {
          this.hideList = data
        })
      },
      promptAmount (id) {
        this.closeSheet()
        MessageBox.prompt(' ', '请输入还款金额').then((v) => {
          let amount = v.value
          if (amount === null || amount.trim() === '' || amount.trim() === '0' || Number(amount) === 0 || isNaN(Number(amount))) {
            msg('请填写应还金额')
            return false
          }
          if (v.action === 'confirm') {
            let params = {id: id, payment_amount: amount}
            this.$post('/vue/card/save_payment_amount', params).then((res) => {
              msg('保存成功')
              for (let i = 0; i < this.billList.length; i++) {
                if (this.billList[i].id === id) {
                  this.billList[i].payment_amount = Number(v.value).toFixed(2).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
                }
              }
            })
          }
        })
      },
      actionSheet (cid, index) {
        if (this.cardId === cid) {
          this.cardId = 0
          this.listIndex = ''
        } else {
          this.cardId = cid
          this.listIndex = index
        }
      },
      closeSheet () {
        this.cardId = 0
      },
      toAddCard () {
        this.$router.push({name: 'AddCard'})
      },
      editHandle (id) {
        this.$router.push({name: 'EditCard', params: {id: id}})
      },
      delHandle (id) {
        this.closeSheet()
        let params = {'id': id}
        MessageBox.confirm('确定删除卡片么？', '温馨提示').then(action => {
          if (action === 'confirm') {
            this.$post('/vue/card/card_del', params).then((res) => {
              msg('删除成功')
              this.billList.splice(this.listIndex, 1)
            })
          }
        })
      },
      updateBill (id) {
        this.closeSheet()
        id = parseInt(id)
        let params = {id: id}
        // 查询ID判断show_img
        let tmpIndex = null
        for (let i = 0; i < this.billList.length; i++) {
          if (parseInt(this.billList[i].id) === parseInt(id)) {
            tmpIndex = i
            break
          }
        }
        this.$post('/vue/card/get_show_menu', params).then((data) => {
          if (data.length === 1) {
            MessageBox.confirm('', {
              message: '修改账单状态',
              title: '提示',
              confirmButtonText: data[0].menu,
              showCancelButton: false
            }).then(action => {
              if (action === 'confirm') {
                params[data[0].field] = data[0].value
                this.$post('/vue/card/update_bill', params).then(res => {
                  msg('修改成功')
                  this.updateShowImg(data[0], tmpIndex)
                })
              }
            })
          } else if (data.length === 2) {
            MessageBox.confirm('', {
              message: '修改账单状态',
              title: '提示',
              confirmButtonText: data[1].menu,
              cancelButtonText: data[0].menu,
              cancelButtonClass: 'blue'
            }).then(action => {
              if (action === 'confirm') {
                params[data[1].field] = data[1].value
                this.$post('/vue/card/update_bill', params).then(res => {
                  msg('修改成功')
                  this.updateShowImg(data[1], tmpIndex)
                })
              }
            }).catch(err => {
              if (err === 'cancel') {
                params[data[0].field] = data[0].value
                this.$post('/vue/card/update_bill', params).then(res => {
                  msg('修改成功')
                  this.updateShowImg(data[0], tmpIndex)
                })
              }
            })
          }
        })
      },
      updateShowImg (data, index) {
        if (Number(data.value) === 2) {
          this.billList[index].show_img = null
        } else if (data.field === 'is_paid' && Number(data.value) === 1) {
          this.billList[index].show_img = 'green'
        } else if (data.field === 'is_clear' && Number(data.value) === 1) {
          this.billList[index].show_img = 'gray'
        }
      },
      hideCard (id) {
        this.closeSheet()
        let params = {
          id: id,
          is_hide: 1
        }
        this.$post('/vue/card/update_hide_status', params).then(data => {
          msg('卡片已隐藏')
          this.billList.splice(this.listIndex, 1)
          this.getHideList()
        })
      },
      showCard (id) {
        this.closeSheet()
        let params = {
          id: id,
          is_hide: 2
        }
        this.$post('/vue/card/update_hide_status', params).then(data => {
          msg('卡片已显示')
          this.hideList.splice(this.listIndex, 1)
          this.getBillList()
        })
      },
      shortCard (id) {
        this.closeSheet()
        let i = this.inArray(this.shortCardList, id)
        if (i !== false) {
          this.shortCardList.splice(i, 1)
        } else {
          this.shortCardList.push(id)
        }
      },
      allShortCard () {
        let arr = []
        arr = arr.concat(this.billList)
        arr = arr.concat(this.hideList)
        for (let i = 0; i < arr.length; i++) {
          if (this.inArray(this.shortCardList, arr[i].id) === false) {
            this.shortCardList.push(arr[i].id)
          }
        }
      },
      allLongCard () {
        this.shortCardList = []
      },
      showHide () {
        this.closeSheet()
        this.isHide = !this.isHide
        this.hideText = this.isHide ? '显示隐藏的卡片' : '收起隐藏的卡片'
      },
      inArray (arr, val) {
        for (let i = 0; i < arr.length; i++) {
          if (val === arr[i]) {
            return i
          }
        }
        return false
      },
      scrolls (e) {
        document.querySelector('.pb-70').scrollTop = e.target.scrollTop
      }
    },
    mounted () {
      this.getBillList()
      this.getHideList()
      this.scrollHeight = document.documentElement.clientHeight - 106
    }
  }
  const msg = (msg) => {
    Toast({
      message: msg,
      position: 'bottom',
      duration: 2000
    })
  }
</script>

<style lang="css">
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
.loading-background, .mint-loadmore-top span {
  -webkit-transition: .2s linear;
  transition: .2s linear;
}
.mint-loadmore-top span {
  display: inline-block;
  vertical-align: middle;
}
.mint-loadmore-top span.is-rotate {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.page-loadmore .mint-spinner {
  display: inline-block;
  vertical-align: middle;
}
.page-loadmore-desc {
  text-align: center;
  color: #666;
  padding-bottom: 5px;
}
.page-loadmore-desc:last-of-type,
.page-loadmore-listitem {
  border-bottom: 1px solid #eee;
}
.page-loadmore-listitem {
  height: 50px;
  line-height: 50px;
  text-align: center;
}
.page-loadmore-listitem:first-child {
  border-top: 1px solid #eee;
}
.page-loadmore-wrapper {
  overflow: scroll;
}
.mint-loadmore-bottom span {
  display: inline-block;
  -webkit-transition: .2s linear;
  transition: .2s linear;
  vertical-align: middle;
}
.mint-loadmore-bottom span.is-rotate {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.mint-loadmore-top, .mint-loadmore-bottom {
  color: #a9a9a9;
}
.mint-msgbox-btn.blue {
  color: #26a2ff;
}
</style>